<template>
  <div>
    <search-bar-view
        @hidden-view='hideMainView'
        @click-search='search' ref='searchBar' :close="true"></search-bar-view>
    <template v-if="isShow">
      <filter-search-view @click-screening='clickScreening'></filter-search-view>
      <div v-infinite-scroll="moreList" infinite-scroll-disabled="loading" infinite-scroll-distance="100"
           :style="!noInfo?'background-color: #ffffff':''">
        <!--<coupon-card :coupon="coupon" v-for="(coupon,index) in dataList" :key='index' view="coupon"-->
        <!--v-if="searchType === 'coupon'"></coupon-card>-->
        <template v-for="(item,index) in dataList" v-if="searchType === 'coupon'">
          <card :coupon-info="item">
            <div class="div_space" v-if="(index+1) != dataList.length"></div>
          </card>
        </template>
        <!--<mecth-card :merch-info="merch" v-for="(merch,index) in dataList" :key='index'
                    v-if="searchType === 'mecth'"></mecth-card>-->
        <template v-for="(item,index) in dataList" v-if="searchType === 'mecth'">
          <mchtListInfo :mchtInfo="item"></mchtListInfo>
          <merch-coupon :couponName="item.couponName" :couponType="item.couponType" :denomination="item.denomination" :validatyEnd="item.validatyEnd"></merch-coupon>
          <div class="div_space" v-if="(index+1) != dataList.length"></div>
        </template>
        <no-data v-if="noInfo"></no-data>
      </div>
      <go-top v-show="goTopState" ref="goTopId"></go-top>
      <div class="lastInfoMore" v-if="!moreInfo" v-show="dataList.length>2">没有更多</div>
    </template>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  import SearchBarView from 'src/componentes/global/search_bar.vue'
  import * as types from '../../vuex/types.js'
  import {Storage} from 'src/utils/storage.js'

  export default {
    name: 'coupon-search',
    components: {
      SearchBarView,
      mchtListInfo: () => import('src/componentes/local/home-mchtList'),
      card: () => import('src/componentes/local/coupon-card/main-index.vue')
    },
    data: () => ({
      isShow: true,
      loading: true,
      noMoreCoupon: true,
      currFilter: { // 当前被选中条件
        couponType: 'all', // 电子券类型
        mchtFacil: '', // 商户设施
        mchtType: '', // 餐饮
        near: '' // 距离
      },
      noInfo: false,
      contInfo: '',
      goTopState: false,
      moreInfo: false
    }),
    computed: {
      ...mapState({
        couponTit: state => state.coupon.couponTit, //左上角标题
        couponInfo: state => state.coupon.couponInfo, //电子券数组
        position: state => state.coupon.position, //用户地理位置
        searchKey: state => state.coupon.searchKey, // 搜索关键字
        searchType: state => state.coupon.searchType, // 搜索类型
        couponInfoPageLimit: state => state.coupon.couponInfoPageLimit, //分页限制
        couponInfoPage: state => state.coupon.couponInfoPage, //页数
      }),
      dataList() {
        this.couponInfo.forEach(item => {
          item.type = item.couponType
          item.name = item.couponName
          item.comNum = item.couponComNum
          item.comScore = item.couponComScore
        })
        return this.couponInfo
      }
    },
    created() {
      // 监视滚动
      window.addEventListener('scroll', this.handleScroll);
      this.$store.commit(types.GET_PAGE_NUM, 1)
      this.$store.commit(types.GET_COUPON_LIST);
      this.$store.commit(types.GET_SCORLL_STATUS, true);
      this.moreList();

    },
    mounted: function () {

      this.$refs.searchBar.searchKey = this.searchKey
    },
    methods: {
      hideMainView(value) {
        this.isShow = value
//    	this.moreList();
      },
      search() {
        var me = this
        this.isShow = true
        this.$store.commit(types.GET_COUPON_LIST);
        this.$store.commit(types.GET_PAGE_NUM, 1)
        this.moreList();

        // if (me.contInfo.flag) {
        //   me.noInfo=false;
        //   console.log(me.noInfo)
        // }else{
        //   me.noInfo=true;
        //   console.log(me.noInfo)
        // }
      },

      // 获取电子券
      moreList(couponType) {
        this.loading = true;
        this.noMoreCoupon = true;
//    this.noMoreCoupon = true;	 
        // this.loading = false
        if (!this.noMoreCoupon) { //防止重复点击
          return
        }
        let me = this
        this.noMoreCoupon = false;
        let postAction
        let data = this.currFilter

        if (this.$route.query.type || this.$route.query.type == 'home' || this.couponTit == '全部') {
          let index
          let arrNew = []  //搜索点击首页搜索。不是八大类，保存名字
          let arrNewIndex = []//搜索点击首页搜索。不是八大类，保存名字，获取八大类id
          Storage.get('menuArr', true).forEach(function (item) {
            arrNew.push(item.dictValue)
            arrNewIndex.push(item.dictId)
          })
          arrNew.forEach((item, i) => {
            if ((this.couponTit == '全部' || this.couponTit == '') && this.$route.query.type) {
              index = '*'
            } else if ((this.couponTit == '全部' || this.couponTit == '') && !this.$route.query.type) {
              index = Storage.get('menuArrMess', true).menuArrId
            } else if (this.couponTit == arrNew[i]) {
              index = arrNewIndex[i]
            }

          })

          let param = {
            method: 'post',
            data: {
              near: data.near,
              mchtType: index,
              flag: index == '9008' ? 1 : 0,
              facilities: data.mchtFacil,
              couponType: data.couponType == 'all' ? '*' : data.couponType,
              // couponName: this.searchKey ? this.searchKey : '*',
              position: this.position || '' // 121.6248,31.326
            }
          }
          if (this.searchType === 'mecth') { //搜索商户,需使用session进行判断
            postAction = 'queryEightMcht'
            // delete  param.data.couponName
            param.data.mchtName = this.searchKey ? this.searchKey : '*'
          } else {
            postAction = 'queryEight'
            param.data.couponName = this.searchKey ? this.searchKey : '*'
          }
          this.$store.dispatch(postAction, param).then(rep => {
            if (me.couponInfoPage == 1) {
              if (this.dataList.length === 0) {
                this.noInfo = true;
                this.noMoreCoupon = true
                return
              }
            } else {
              this.noInfo = false;
            }
            me.contInfo = rep.content;
            if (rep.content.couponList && (rep.content.couponList.length == this.couponInfoPageLimit)) { //如果列表数据够10条，开启下拉加载
              me.moreInfo = true;
              this.loading = false;
            } else {
              me.moreInfo = false;
            }

            if (rep.content.mchtList && (rep.content.mchtList.length == this.couponInfoPageLimit)) { //如果列表数据够10条，开启下拉加载
              me.moreInfo = true;
              me.loading = false;
            } else {
              me.moreInfo = false;
            }
            setTimeout(() => {
              me.noMoreCoupon = true
            }, 300);
          }).catch((rep) => {
            setTimeout(() => {
              this.noMoreCoupon = true
            }, 300);
          });
        } else {
          let param = {
            method: 'post',
            data: {
              near: data.near,
              flag: this.couponTit == '网上商城' ? 1 : 0,
              mchtType: this.couponTit === '全部' ? '*' : this.couponTit,
              facilities: data.mchtFacil,
              couponType: data.couponType == 'all' ? '*' : data.couponType,
              // couponName: this.searchKey ? this.searchKey : '*',
              position: this.position || '' // 121.6248,31.326
            }
          }
          if (this.searchType === 'mecth' && (this.couponTit === '全部' || this.couponTit === Storage.get('menuArrMess', true).tit)) { //搜索商户,需使用session进行判断
            postAction = 'queryEightMcht'
            // delete  param.data.couponName
            param.data.mchtType = Storage.get('menuArrMess', true).menuArrId
            param.data.mchtName = this.searchKey ? this.searchKey : '*'
          } else if (this.searchType === 'mecth') {
            postAction = 'getMerList'
            // delete  param.data.couponName
            param.data.mchtName = this.searchKey ? this.searchKey : '*'
          } else {
            postAction = 'getCouponList';
            if (param.data.mchtType && Storage.get('menuArrMess', true).tit == this.couponTit) { //选择全部的时候调用其它接口
              postAction = 'queryEight'
              param.data.mchtType = Storage.get('menuArrMess', true).menuArrId
            }
            param.data.couponName = this.searchKey ? this.searchKey : '*'
          }
//          console.log(param.data.mchtType = this.couponTit);
          this.$store.dispatch(postAction, param).then(rep => {
            if (me.couponInfoPage == 1) {
              if (this.dataList.length === 0) {
                this.noInfo = true;
                this.noMoreCoupon = true
                return
              }
            } else {
              this.noInfo = false;
            }
            me.contInfo = rep.content;
            if (rep.content.couponList.length == this.couponInfoPageLimit) { //如果列表数据够10条，开启下拉加载
              me.moreInfo = true;
              this.loading = false;
            } else {
              me.moreInfo = false;
            }
            setTimeout(() => {
              this.noMoreCoupon = true
            }, 300);
          }).catch((rep) => {
            setTimeout(() => {
              this.noMoreCoupon = true
            }, 300);
          });
        }

      },
      // 筛选
      clickScreening({near, mchtType, mchtFacil}) {
        Object.assign(this.currFilter, {near, mchtType, mchtFacil})
        this.$store.commit(types.GET_COUPON_LIST)
        this.$store.commit(types.GET_PAGE_NUM, 1)
        this.noMoreCoupon = true;
        this.moreList();

      },
      //监听滚动事件
      handleScroll() {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var scrollHeight = document.documentElement.clientHeight || document.body.scrollTop;
        // console.log(scrollHeight)
        if (scrollTop >= scrollHeight + 50) {
          this.goTopState = true
        } else {
          this.goTopState = false
        }
        //回到顶部过程中用户滚动滚动条，停止定时器
        if (scrollTop <= 0) {
          if (this.$refs.goTopId) {
            this.$refs.goTopId.clear();
          }
        }
        ;
      },
    },
    beforeRouteLeave(to, from, next) {
      // 清空搜索数据
      // this.$store.commit("search_key", '');
      this.$emit('change-title', '芸券')
      this.$emit('change-btn', false, false);
      // 避免返回时未清除定时器
      if (this.$refs.goTopId) {
        this.$refs.goTopId.clear();
      }
      window.removeEventListener('scroll', this.handleScroll);

      next()
    }
  }
</script>
<style scoped>
  .coupon_tit {
    background-color: #fff;
  }
</style>
